<template>
	<view class="wrap">
		<view class="big-pic">
			<image :src="defimg"></image>
		</view>
		<view><v-student-summary class="write-bg" :item="student_card"></v-student-summary></view>
		<view class="write-bg" style="margin-top: 5px;">
			<v-anchor :tabs="tabs" @tab="changeTab"></v-anchor>
		</view>
		<view class="tab-content">
			<view class="content-main" v-show="tabs.currentTab === 'CourseTable' ">
				<view class="uni-card">
					<!-- 课表 -->
					<view class="tableView">
						<view class="titleView">
							<view class="title-left">课表</view>
							<view class="title-right">
								<view
									v-for="(item, index) in titleList"
									:key="index"
									class="titleName"
									:class="titleIndex == index ? 'titleActive' : ''"
									@click="titleClick(index)"
								>
									{{ item }}
								</view>
							</view>
						</view>
						<uni-table ref="Series" v-if="titleIndex == 0" :stu_id="973"></uni-table>
						<myTable v-if="titleIndex ==1" :stu_id="973"></myTable>
					</view>
				</view>
			</view>
			<view class="content-main" v-show="tabs.currentTab === 'StudyHabit'">
				<!-- 习惯 -->
				<v-habit></v-habit>
			</view>
			<view class="content-main" v-show="tabs.currentTab === 'Node'">
				<!-- 笔记 -->
				<v-node></v-node>
			</view>
			<view class="content-main" v-show="tabs.currentTab === 'HomeWork'">
				<!-- 作业 -->
				<v-question-datailed :page="page" :status="status" ref="question"></v-question-datailed>
				<view class="btns">
					<view class="btn">已添加2</view>
					<view class="btn gotoBtn" @click="gotoCar">前往发布</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import studentSummary from './components/student-summary'
	import anchor from './components/anchor'
	import habit from './components/habit'
	import node from './components/node'
	import questionDatailed from './components/question-datailed'
	// 引入工具集
	import util from '@/common/util.js'
	import uniTable from './components/table.vue';
	import myTable from './components/mytable.vue';
	export default {
		data () {
			return {
				teacher_id: 1,
				course_page: 0,
				tabs: {
					items: {'CourseTable': '课表', 'StudyHabit': '学习习惯', 'Node': '笔记','HomeWork': '作业'},
					currentTab: 'CourseTable'
				},
				cur_tab: 0,
				sub_obj: {},	// 科目列表
				student_card: {
					student_name: '张三',
					desc: '透过屏幕畅游知识海洋，让知识更有魅力透过屏幕畅游知识海洋，让知识更有魅力'
				},
				titleList: ['学校课','自定课'],
				titleIndex: 0,
				page:1,
				reload:true,
				status: 'more',
				defimg: this.defimg
			}
		},
		components: {
			vStudentSummary: studentSummary,
			vAnchor: anchor,
			vHabit: habit,
			vNode: node,
			vQuestionDatailed: questionDatailed,
			uniTable,
			myTable
		},
		onPullDownRefresh() {
		},
		onReachBottom() {
			if (this.tabs.currentTab === 'HomeWork') {
				this.status = 'loading';
				this.page = this.page + 1;
				var _this = this;
				setTimeout(function() {
					// _this.getList();
					// _this.$refs.question.getList()
				}, 500);
				console.log(this.page)
			}
		},
		methods: {
			gotoCar() {
				uni.navigateTo({
					url: './selectList'
				})
			},
			changeTab(tab){
				this.$set(this.tabs, 'currentTab', tab.key)
			},
			titleClick(index) {
				this.titleIndex = index
			}
		},
		onLoad(e) {
		}
	}
</script>

<style scoped>
	page{background: #F7F7F7;}
	
	.write-bg{background: #fff;}
	.big-pic{height:422upx;}
	.big-pic image{height:100%; width:100%; background:#FAFAFA;}
	.no-item-wrap{text-align: center; font-size: 30upx; color: #C4C4C4; line-height: 80upx; height: 80upx;background: #FFF; margin: 30upx; border-radius: 10upx;}
	.content-main {
		padding: 30upx;
	}
	.btns {
		display: flex;
		justify-content: space-between;
	}
	.btns .btn {
		width: 300upx;
		height: 80upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80upx;
		font-size: 32upx;
		background:linear-gradient(180deg,rgba(255,156,106,1) 0%,rgba(234,84,85,1) 100%);
		border-radius: 8upx;
	}
	.btns  .gotoBtn {
		background:linear-gradient(180deg,rgba(255,170,0,1) 0%,rgba(255,153,0,1) 100%);
	}
	/* 课表 */
	.tableView {
		/* margin: -48upx auto 20upx; */
		width: 690upx;
		border-radius: 20upx;
		background: #FFFFFF;
		padding-bottom: 20upx;
	}
	
	.titleView {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 80upx;
		border-bottom: 2upx solid #E5E5E5;
	}
	
	.title-left {
		width: 20%;
		color: #333333;
		font-size: 36upx;
		font-weight: bold;
		margin-left: 30upx;
	}
	
	.title-right {
		width: 80%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.titleName {
		color: #666666;
		font-size: 30upx;
		width: 25%;
	}
	
	.titleActive {
		color: #FF9900;
	}
	.not_data {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.not_data i {
		margin-top: 20upx;
		font-size: 400upx;
		line-height: 300upx;
		color: rgba(229, 229, 229, 1);
	}
	
	.not_data_text {
		color: #C2C2C2;
		font-size: 42upx;
		line-height: 40upx;
	}
</style>
